<!-- 质检管理页 -->
<template>
  <div class="app-container bg-gray-100">
    <!-- 侧边栏 -->
    <div 
      id="sidebar" 
      class="sidebar fixed h-full bg-gray-800 text-white transition-all duration-300 ease-in-out"
      :class="sidebarExpanded ? 'sidebar-expanded' : 'sidebar-collapsed'"
    >
      <div class="p-4 flex items-center justify-between border-b border-gray-700">
        <div class="flex items-center space-x-2">
          <i class="fa fa-flask text-xl"></i>
          <span 
            id="logo-text" 
            class="font-bold text-lg transition-opacity duration-300 ease-in-out"
            :class="{ 'opacity-0 w-0 overflow-hidden': !sidebarExpanded, 'opacity-100': sidebarExpanded }"
          >
            质检系统
          </span>
        </div>
        <!-- <button 
          id="toggle-sidebar" 
          class="text-gray-400 hover:text-white"
          @click="toggleSidebar"
        >
          <i class="fa fa-bars"></i>
        </button> -->
      </div>
      <nav class="p-4">
        <ul class="space-y-2">
          <li>
            <a 
              href="#" 
              class="nav-link flex items-center p-2 rounded hover:bg-gray-700 transition-colors duration-200"
              :class="{ 'active-nav': activePage === 'incoming' }"
              data-target="incoming"
              @click="switchPage('incoming')"
            >
              <i class="fa fa-truck mr-3"></i>
              <span 
                class="nav-text transition-opacity duration-300 ease-in-out"
                :class="{ 'opacity-0 w-0 overflow-hidden': !sidebarExpanded, 'opacity-100': sidebarExpanded }"
              >
                来料检验
              </span>
            </a>
          </li>
          <li>
            <a 
              href="#" 
              class="nav-link flex items-center p-2 rounded hover:bg-gray-700 transition-colors duration-200"
              :class="{ 'active-nav': activePage === 'outgoing' }"
              data-target="outgoing"
              @click="switchPage('outgoing')"
            >
              <i class="fa fa-box-open mr-3"></i>
              <span 
                class="nav-text transition-opacity duration-300 ease-in-out"
                :class="{ 'opacity-0 w-0 overflow-hidden': !sidebarExpanded, 'opacity-100': sidebarExpanded }"
              >
                出库检验
              </span>
            </a>
          </li>
          <li>
            <a 
              href="#" 
              class="nav-link flex items-center p-2 rounded hover:bg-gray-700 transition-colors duration-200"
              :class="{ 'active-nav': activePage === 'records' }"
              data-target="records"
              @click="switchPage('records')"
            >
              <i class="fa fa-list-alt mr-3"></i>
              <span 
                class="nav-text transition-opacity duration-300 ease-in-out"
                :class="{ 'opacity-0 w-0 overflow-hidden': !sidebarExpanded, 'opacity-100': sidebarExpanded }"
              >
                检验记录
              </span>
            </a>
          </li>
        </ul>
      </nav>
    </div>

    <!-- 主内容区 -->
    <div 
      id="main-content" 
      class="main-content min-h-screen transition-all duration-300 ease-in-out"
      :class="sidebarExpanded ? 'content-expanded' : 'content-collapsed'"
    >
      <!-- 顶部导航 -->
      <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="px-6 py-4 flex justify-between items-center">
          <div>
            <h1 class="text-xl font-semibold text-gray-800" id="page-title">{{ pageTitle }}</h1>
          </div>
          <div class="flex items-center space-x-4">
            <div class="relative">
              <button id="notification-btn" class="text-gray-600 hover:text-gray-900">
                <i class="fa fa-bell"></i>
                <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
              </button>
            </div>
            <div class="flex items-center">
              <img src="https://picsum.photos/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
              <span class="ml-2 text-gray-700">质检管理员</span>
            </div>
          </div>
        </div>
      </header>

      <!-- 来料检验模块 -->
      <section 
        id="incoming" 
        class="page-section p-6 transition-opacity duration-300"
        :class="{ 'active-page': activePage === 'incoming' }"
      >
        <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
          <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-semibold">来料检验登记</h3>
            <button 
              id="add-incoming-btn" 
              class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center transition-colors duration-200"
              @click="resetIncomingForm"
            >
              <i class="fa fa-plus mr-2"></i> 新增检验单
            </button>
          </div>
          <div class="p-6">
            <form id="incomingInspectForm" @submit.prevent="handleIncomingSubmit">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 基础信息 -->
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="materialName">原材料名称 <span class="text-red-500">*</span></label>
                  <input 
                    type="text" 
                    id="materialName" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    placeholder="例如：不锈钢板、电子元件B" 
                    required 
                    v-model="incomingForm.materialName"
                  >
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="supplier">供应商 <span class="text-red-500">*</span></label>
                  <select 
                    id="supplier" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    required 
                    v-model="incomingForm.supplier"
                  >
                    <option value="">请选择供应商</option>
                    <option value="A精密材料有限公司">A精密材料有限公司</option>
                    <option value="B电子元件股份公司">B电子元件股份公司</option>
                    <option value="C金属制品厂">C金属制品厂</option>
                    <option value="其他">其他</option>
                  </select>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="batchNo">批次号 <span class="text-red-500">*</span></label>
                  <input 
                    type="text" 
                    id="batchNo" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    placeholder="例如：MAT-20240826-001" 
                    required 
                    v-model="incomingForm.batchNo"
                  >
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="quantity">来料数量 <span class="text-red-500">*</span></label>
                  <div class="flex items-center">
                    <input 
                      type="number" 
                      id="quantity" 
                      min="1" 
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                      placeholder="请输入数量" 
                      required 
                      v-model.number="incomingForm.quantity"
                    >
                    <span class="ml-2 text-gray-500">件/个</span>
                  </div>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="inspectDate">检验日期 <span class="text-red-500">*</span></label>
                  <input 
                    type="date" 
                    id="inspectDate" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    required 
                    v-model="incomingForm.inspectDate"
                  >
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="inspector">检验员 <span class="text-red-500">*</span></label>
                  <input 
                    type="text" 
                    id="inspector" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    placeholder="输入检验员姓名" 
                    required 
                    v-model="incomingForm.inspector"
                  >
                </div>

                <!-- 检验项目 -->
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">检验项目 <span class="text-red-500">*</span></label>
                  <div class="space-y-2">
                    <div class="flex items-center">
                      <input 
                        type="checkbox" 
                        id="checkAppearance" 
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" 
                        v-model="incomingForm.checkAppearance"
                      >
                      <label for="checkAppearance" class="ml-2 text-sm text-gray-700">外观检查（划痕、变形、色差等）</label>
                    </div>
                    <div class="flex items-center">
                      <input 
                        type="checkbox" 
                        id="checkSize" 
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" 
                        v-model="incomingForm.checkSize"
                      >
                      <label for="checkSize" class="ml-2 text-sm text-gray-700">尺寸测量（长度、宽度、厚度等）</label>
                    </div>
                    <div class="flex items-center">
                      <input 
                        type="checkbox" 
                        id="checkPerformance" 
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" 
                        v-model="incomingForm.checkPerformance"
                      >
                      <label for="checkPerformance" class="ml-2 text-sm text-gray-700">性能测试（硬度、导电性等）</label>
                    </div>
                  </div>
                </div>

                <!-- 检验结果 -->
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="inspectResult">检验结果 <span class="text-red-500">*</span></label>
                  <select 
                    id="inspectResult" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    required 
                    v-model="incomingForm.inspectResult"
                  >
                    <option value="">请选择检验结果</option>
                    <option value="pass">合格（符合质量标准）</option>
                    <option value="fail">不合格（需返工/退货）</option>
                    <option value="pending">待确认（需二次检验）</option>
                  </select>
                </div>

                <!-- 备注信息 -->
                <div class="md:col-span-2">
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="remark">备注说明</label>
                  <textarea 
                    id="remark" 
                    rows="3" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    placeholder="记录特殊情况，如：外观轻微划痕但不影响使用、尺寸偏差0.1mm在允许范围内等"
                    v-model="incomingForm.remark"
                  ></textarea>
                </div>
              </div>

              <!-- 提交按钮 -->
              <div class="mt-6 flex justify-end space-x-3">
                <button 
                  type="reset" 
                  class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-200"
                  @click="resetIncomingForm"
                >
                  重置表单
                </button>
                <button 
                  type="submit" 
                  class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
                >
                  提交检验记录
                </button>
              </div>
            </form>
          </div>
        </div>

        <!-- 最近来料检验记录 -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
          <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold">最近来料检验记录</h3>
          </div>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">检验单号</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">原材料名称</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">供应商</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">检验结果</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">检验时间</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody id="incoming-records-body" class="bg-white divide-y divide-gray-200">
                <tr v-for="record in paginatedIncomingRecords" :key="record.id">
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ record.id }}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.materialName }}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.supplier }}</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span 
                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                      :class="{
                        'bg-green-100 text-green-800': record.inspectResult === 'pass',
                        'bg-red-100 text-red-800': record.inspectResult === 'fail',
                        'bg-yellow-100 text-yellow-800': record.inspectResult === 'pending'
                      }"
                    >
                      {{ getResultText(record.inspectResult) }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ formatDateTime(record.timestamp) }}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a 
                      href="#" 
                      class="view-btn text-blue-600 hover:text-blue-900 mr-3" 
                      @click.prevent="showRecordDetails(record.id, 'incoming')"
                    >
                      查看
                    </a>
                    <a 
                      href="#" 
                      class="print-btn text-gray-600 hover:text-gray-900" 
                      @click.prevent="printRecord(record.id)"
                    >
                      打印
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 分页 -->
          <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
            <div class="text-sm text-gray-500">
              显示 {{ incomingPagination.start }} 到 {{ incomingPagination.end }} 条，共 {{ incomingRecords.length }} 条记录
            </div>
            <div class="flex space-x-2">
              <button 
                id="incoming-prev" 
                class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 transition-colors duration-200"
                :disabled="incomingCurrentPage === 1"
                @click="changeIncomingPage(incomingCurrentPage - 1)"
              >
                上一页
              </button>
              <button 
                v-for="page in incomingTotalPages" 
                :key="page"
                class="incoming-page px-3 py-1 border text-sm font-medium rounded-md transition-colors duration-200"
                :class="{
                  'border-transparent bg-blue-600 text-white hover:bg-blue-700': page === incomingCurrentPage,
                  'border-gray-300 bg-white text-gray-700 hover:bg-gray-50': page !== incomingCurrentPage
                }"
                @click="changeIncomingPage(page)"
              >
                {{ page }}
              </button>
              <button 
                id="incoming-next" 
                class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-200"
                :disabled="incomingCurrentPage === incomingTotalPages"
                @click="changeIncomingPage(incomingCurrentPage + 1)"
              >
                下一页
              </button>
            </div>
          </div>
        </div>
      </section>

      <!-- 出库检验模块 -->
      <section 
        id="outgoing" 
        class="page-section p-6 transition-opacity duration-300"
        :class="{ 'active-page': activePage === 'outgoing' }"
      >
        <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
          <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-semibold">出库检验登记</h3>
            <button 
              id="add-outgoing-btn" 
              class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 flex items-center transition-colors duration-200"
              @click="resetOutgoingForm"
            >
              <i class="fa fa-plus mr-2"></i> 新增检验单
            </button>
          </div>
          <div class="p-6">
            <form id="outgoingInspectForm" @submit.prevent="handleOutgoingSubmit">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- 基础信息 -->
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="productName">产品名称 <span class="text-red-500">*</span></label>
                  <select 
                    id="productName" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    required 
                    v-model="outgoingForm.productName"
                  >
                    <option value="">请选择产品</option>
                    <option value="产品A型（工业控制器）">产品A型（工业控制器）</option>
                    <option value="产品B型（传感器模块）">产品B型（传感器模块）</option>
                    <option value="产品C型（电源适配器）">产品C型（电源适配器）</option>
                    <option value="定制产品">定制产品</option>
                  </select>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="productModel">产品型号 <span class="text-red-500">*</span></label>
                  <input 
                    type="text" 
                    id="productModel" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    placeholder="例如：CTRL-A-2024、SENSOR-B-01" 
                    required 
                    v-model="outgoingForm.productModel"
                  >
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="productBatch">生产批次 <span class="text-red-500">*</span></label>
                  <input 
                    type="text" 
                    id="productBatch" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    placeholder="例如：PROD-20240826-001" 
                    required 
                    v-model="outgoingForm.productBatch"
                  >
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="productQuantity">出库数量 <span class="text-red-500">*</span></label>
                  <div class="flex items-center">
                    <input 
                      type="number" 
                      id="productQuantity" 
                      min="1" 
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                      placeholder="请输入数量" 
                      required 
                      v-model.number="outgoingForm.productQuantity"
                    >
                    <span class="ml-2 text-gray-500">台/套</span>
                  </div>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="outgoingDate">出库日期 <span class="text-red-500">*</span></label>
                  <input 
                    type="date" 
                    id="outgoingDate" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    required 
                    v-model="outgoingForm.outgoingDate"
                  >
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="outgoingInspector">检验员 <span class="text-red-500">*</span></label>
                  <input 
                    type="text" 
                    id="outgoingInspector" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    placeholder="输入检验员姓名" 
                    required 
                    v-model="outgoingForm.outgoingInspector"
                  >
                </div>

                <!-- 检验项目 -->
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">检验项目 <span class="text-red-500">*</span></label>
                  <div class="space-y-2">
                    <div class="flex items-center">
                      <input 
                        type="checkbox" 
                        id="outCheckAppearance" 
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" 
                        v-model="outgoingForm.outCheckAppearance"
                      >
                      <label for="outCheckAppearance" class="ml-2 text-sm text-gray-700">外观检查（外壳、标识、接口等）</label>
                    </div>
                    <div class="flex items-center">
                      <input 
                        type="checkbox" 
                        id="outCheckFunction" 
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" 
                        v-model="outgoingForm.outCheckFunction"
                      >
                      <label for="outCheckFunction" class="ml-2 text-sm text-gray-700">功能测试（通电、运行、精度等）</label>
                    </div>
                    <div class="flex items-center">
                      <input 
                        type="checkbox" 
                        id="outCheckPackage" 
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" 
                        v-model="outgoingForm.outCheckPackage"
                      >
                      <label for="outCheckPackage" class="ml-2 text-sm text-gray-700">包装检查（完整性、防护、标签等）</label>
                    </div>
                  </div>
                </div>

                <!-- 检验结果 -->
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="outgoingResult">检验结果 <span class="text-red-500">*</span></label>
                  <select 
                    id="outgoingResult" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    required 
                    v-model="outgoingForm.outgoingResult"
                  >
                    <option value="">请选择检验结果</option>
                    <option value="pass">合格（允许出库）</option>
                    <option value="fail">不合格（需返修/返工）</option>
                    <option value="pending">待确认（需二次检验）</option>
                  </select>
                </div>

                <!-- 备注信息 -->
                <div class="md:col-span-2">
                  <label class="block text-sm font-medium text-gray-700 mb-1" for="outgoingRemark">备注说明</label>
                  <textarea 
                    id="outgoingRemark" 
                    rows="3" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" 
                    placeholder="记录特殊情况，如：包装轻微压痕但不影响产品、功能测试全部通过等"
                    v-model="outgoingForm.outgoingRemark"
                  ></textarea>
                </div>
              </div>

              <!-- 提交按钮 -->
              <div class="mt-6 flex justify-end space-x-3">
                <button 
                  type="reset" 
                  class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-200"
                  @click="resetOutgoingForm"
                >
                  重置表单
                </button>
                <button 
                  type="submit" 
                  class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
                >
                  提交检验记录
                </button>
              </div>
            </form>
          </div>
        </div>

        <!-- 最近出库检验记录 -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
          <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="text-lg font-semibold">最近出库检验记录</h3>
          </div>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">检验单号</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">产品名称</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">生产批次</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">检验结果</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">出库时间</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody id="outgoing-records-body" class="bg-white divide-y divide-gray-200">
                <tr v-for="record in paginatedOutgoingRecords" :key="record.id">
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ record.id }}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.productName }}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.productBatch }}</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span 
                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                      :class="{
                        'bg-green-100 text-green-800': record.inspectResult === 'pass',
                        'bg-red-100 text-red-800': record.inspectResult === 'fail',
                        'bg-yellow-100 text-yellow-800': record.inspectResult === 'pending'
                      }"
                    >
                      {{ getResultText(record.inspectResult) }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ formatDateTime(record.timestamp) }}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a 
                      href="#" 
                      class="view-btn text-blue-600 hover:text-blue-900 mr-3" 
                      @click.prevent="showRecordDetails(record.id, 'outgoing')"
                    >
                      查看
                    </a>
                    <a 
                      href="#" 
                      class="print-btn text-gray-600 hover:text-gray-900" 
                      @click.prevent="printRecord(record.id)"
                    >
                      打印
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 分页 -->
          <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
            <div class="text-sm text-gray-500">
              显示 {{ outgoingPagination.start }} 到 {{ outgoingPagination.end }} 条，共 {{ outgoingRecords.length }} 条记录
            </div>
            <div class="flex space-x-2">
              <button 
                id="outgoing-prev" 
                class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 transition-colors duration-200"
                :disabled="outgoingCurrentPage === 1"
                @click="changeOutgoingPage(outgoingCurrentPage - 1)"
              >
                上一页
              </button>
              <button 
                v-for="page in outgoingTotalPages" 
                :key="page"
                class="outgoing-page px-3 py-1 border text-sm font-medium rounded-md transition-colors duration-200"
                :class="{
                  'border-transparent bg-blue-600 text-white hover:bg-blue-700': page === outgoingCurrentPage,
                  'border-gray-300 bg-white text-gray-700 hover:bg-gray-50': page !== outgoingCurrentPage
                }"
                @click="changeOutgoingPage(page)"
              >
                {{ page }}
              </button>
              <button 
                id="outgoing-next" 
                class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-200"
                :disabled="outgoingCurrentPage === outgoingTotalPages"
                @click="changeOutgoingPage(outgoingCurrentPage + 1)"
              >
                下一页
              </button>
            </div>
          </div>
        </div>
      </section>

      <!-- 检验记录查询模块 -->
      <section 
        id="records" 
        class="page-section p-6 transition-opacity duration-300"
        :class="{ 'active-page': activePage === 'records' }"
      >
        <div class="bg-white rounded-lg shadow overflow-hidden">
          <div class="px-6 py-4 border-b border-gray-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <h3 class="text-lg font-semibold">检验记录查询</h3>
            <div class="flex flex-wrap gap-3 w-full md:w-auto">
              <!-- 搜索框 -->
              <div class="relative w-full md:w-64">
                <input 
                  type="text" 
                  id="search-input" 
                  placeholder="搜索检验单号/产品名" 
                  class="w-full pl-8 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  v-model="searchTerm"
                  @input="filterRecords"
                >
                <i class="fa fa-search absolute left-3 top-3 text-gray-400"></i>
              </div>
              <!-- 检验类型筛选 -->
              <select 
                id="type-filter" 
                class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                v-model="typeFilter"
                @change="filterRecords"
              >
                <option value="">所有检验类型</option>
                <option value="incoming">来料检验</option>
                <option value="outgoing">出库检验</option>
              </select>
              <!-- 检验结果筛选 -->
              <select 
                id="result-filter" 
                class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                v-model="resultFilter"
                @change="filterRecords"
              >
                <option value="">所有检验结果</option>
                <option value="pass">合格</option>
                <option value="fail">不合格</option>
                <option value="pending">待确认</option>
              </select>
              <!-- 导出按钮 -->
              <button 
                id="export-btn" 
                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 flex items-center transition-colors duration-200"
                @click="exportToExcel"
              >
                <i class="fa fa-download mr-2"></i> 导出Excel
              </button>
            </div>
          </div>
          <!-- 记录列表 -->
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">检验单号</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">检验类型</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">物料/产品名称</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">检验结果</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">检验时间</th>
                  <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody id="all-records-body" class="bg-white divide-y divide-gray-200">
                <tr v-for="record in paginatedAllRecords" :key="record.id">
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ record.id }}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <span 
                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                      :class="{
                        'bg-blue-100 text-blue-800': record.type === 'incoming',
                        'bg-purple-100 text-purple-800': record.type === 'outgoing'
                      }"
                    >
                      {{ record.displayType }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ record.name }}</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span 
                      class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                      :class="{
                        'bg-green-100 text-green-800': record.inspectResult === 'pass',
                        'bg-red-100 text-red-800': record.inspectResult === 'fail',
                        'bg-yellow-100 text-yellow-800': record.inspectResult === 'pending'
                      }"
                    >
                      {{ getResultText(record.inspectResult) }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ formatDateTime(record.timestamp) }}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                    <a 
                      href="#" 
                      class="view-btn text-blue-600 hover:text-blue-900 mr-3" 
                      @click.prevent="showRecordDetails(record.id, record.type)"
                    >
                      查看
                    </a>
                    <a 
                      href="#" 
                      class="print-btn text-gray-600 hover:text-gray-900" 
                      @click.prevent="printRecord(record.id)"
                    >
                      打印
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 分页 -->
          <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
            <div class="text-sm text-gray-500">
              显示 {{ allPagination.start }} 到 {{ allPagination.end }} 条，共 {{ filteredAllRecords.length }} 条记录
            </div>
            <div class="flex space-x-2">
              <button 
                id="all-prev" 
                class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 transition-colors duration-200"
                :disabled="allCurrentPage === 1"
                @click="changeAllPage(allCurrentPage - 1)"
              >
                上一页
              </button>
              <button 
                v-for="page in allTotalPages" 
                :key="page"
                class="all-page px-3 py-1 border text-sm font-medium rounded-md transition-colors duration-200"
                :class="{
                  'border-transparent bg-blue-600 text-white hover:bg-blue-700': page === allCurrentPage,
                  'border-gray-300 bg-white text-gray-700 hover:bg-gray-50': page !== allCurrentPage
                }"
                @click="changeAllPage(page)"
              >
                {{ page }}
              </button>
              <button 
                id="all-next" 
                class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors duration-200"
                :disabled="allCurrentPage === allTotalPages"
                @click="changeAllPage(allCurrentPage + 1)"
              >
                下一页
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 模态框 -->
    <div 
      id="modal" 
      class="modal fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-1000 flex justify-center items-center"
      :style="{ display: showModal ? 'flex' : 'none' }"
    >
      <div class="modal-content bg-white p-5 rounded-lg w-4/5 max-w-2xl max-h-96 overflow-y-auto">
        <div class="flex justify-between items-center pb-3">
          <h3 id="modal-title" class="text-lg font-semibold">{{ modalTitle }}</h3>
          <button 
            id="close-modal" 
            class="text-gray-500 hover:text-gray-700"
            @click="closeModal"
          >
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div id="modal-body" v-html="modalBody"></div>
      </div>
    </div>

    <!-- 提示信息 -->
    <div 
      id="toast" 
      class="toast fixed bottom-5 right-5 bg-green-500 text-white p-3 rounded z-1000"
      :style="{ display: showToast ? 'block' : 'none' }"
    >
      {{ toastMessage }}
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const sidebarExpanded = ref(true)
const activePage = ref('incoming')
const pageTitle = ref('来料检验')
const showModal = ref(false)
const modalTitle = ref('检验记录详情')
const modalBody = ref('')
const showToast = ref(false)
const toastMessage = ref('')

// 表单数据
const incomingForm = reactive({
  materialName: '',
  supplier: '',
  batchNo: '',
  quantity: 0,
  inspectDate: '',
  inspector: '',
  checkAppearance: true,
  checkSize: true,
  checkPerformance: true,
  inspectResult: '',
  remark: ''
})

const outgoingForm = reactive({
  productName: '',
  productModel: '',
  productBatch: '',
  productQuantity: 0,
  outgoingDate: '',
  outgoingInspector: '',
  outCheckAppearance: true,
  outCheckFunction: true,
  outCheckPackage: true,
  outgoingResult: '',
  outgoingRemark: ''
})

// 搜索和筛选
const searchTerm = ref('')
const typeFilter = ref('')
const resultFilter = ref('')

// 分页
const incomingCurrentPage = ref(1)
const outgoingCurrentPage = ref(1)
const allCurrentPage = ref(1)
const recordsPerPage = 3

// 数据存储
const inventory = ref([
  { id: 1, name: "不锈钢板（304材质）", quantity: 500, supplier: "A精密材料有限公司" },
  { id: 2, name: "电子元件B（电容）", quantity: 1000, supplier: "B电子元件股份公司" },
  { id: 3, name: "绝缘塑料件", quantity: 800, supplier: "C金属制品厂" }
])

const products = ref([
  { id: 1, name: "产品A型（工业控制器）", model: "CTRL-A-2024", quantity: 200 },
  { id: 2, name: "产品B型（传感器模块）", model: "SENSOR-B-01", quantity: 150 },
  { id: 3, name: "产品C型（电源适配器）", model: "POWER-C-2024", quantity: 300 }
])

const incomingRecords = ref([
  {
    id: "IN-QC-20240826001",
    materialName: "不锈钢板（304材质）",
    supplier: "A精密材料有限公司",
    batchNo: "MAT-20240826-001",
    quantity: 100,
    inspectDate: "2024-08-26",
    inspector: "张三",
    inspectItems: ["外观检查", "尺寸测量", "性能测试"],
    inspectResult: "pass",
    remark: "外观轻微划痕但不影响使用",
    timestamp: new Date("2024-08-26T09:23:00").getTime()
  },
  {
    id: "IN-QC-20240826002",
    materialName: "电子元件B（电容）",
    supplier: "B电子元件股份公司",
    batchNo: "ELEC-20240826-002",
    quantity: 500,
    inspectDate: "2024-08-26",
    inspector: "李四",
    inspectItems: ["外观检查", "性能测试"],
    inspectResult: "fail",
    remark: "部分电容性能不达标",
    timestamp: new Date("2024-08-26T10:45:00").getTime()
  },
  {
    id: "IN-QC-20240825001",
    materialName: "绝缘塑料件",
    supplier: "C金属制品厂",
    batchNo: "PLASTIC-20240825-001",
    quantity: 200,
    inspectDate: "2024-08-25",
    inspector: "王五",
    inspectItems: ["外观检查", "尺寸测量"],
    inspectResult: "pending",
    remark: "尺寸需二次确认",
    timestamp: new Date("2024-08-25T15:10:00").getTime()
  }
])

const outgoingRecords = ref([
  {
    id: "OUT-QC-20240826001",
    productName: "产品A型（工业控制器）",
    productModel: "CTRL-A-2024",
    productBatch: "PROD-20240825-001",
    quantity: 50,
    outgoingDate: "2024-08-26",
    inspector: "赵六",
    inspectItems: ["外观检查", "功能测试", "包装检查"],
    inspectResult: "pass",
    remark: "功能测试全部通过",
    timestamp: new Date("2024-08-26T11:30:00").getTime()
  },
  {
    id: "OUT-QC-20240826002",
    productName: "产品C型（电源适配器）",
    productModel: "POWER-C-2024",
    productBatch: "PROD-20240824-002",
    quantity: 30,
    outgoingDate: "2024-08-26",
    inspector: "钱七",
    inspectItems: ["外观检查", "功能测试"],
    inspectResult: "fail",
    remark: "部分产品功能测试不通过",
    timestamp: new Date("2024-08-26T14:15:00").getTime()
  },
  {
    id: "OUT-QC-20240825001",
    productName: "产品B型（传感器模块）",
    productModel: "SENSOR-B-01",
    productBatch: "PROD-20240823-001",
    quantity: 20,
    outgoingDate: "2024-08-25",
    inspector: "孙八",
    inspectItems: ["外观检查", "功能测试", "包装检查"],
    inspectResult: "pass",
    remark: "包装完好，功能正常",
    timestamp: new Date("2024-08-25T16:40:00").getTime()
  }
])

// 计算属性
const filteredAllRecords = computed(() => {
  // 合并记录并按时间排序
  let allRecords = []

  // 添加来料检验记录
  incomingRecords.value.forEach(record => {
    allRecords.push({
      ...record,
      type: 'incoming',
      displayType: '来料检验',
      name: record.materialName
    })
  })

  // 添加出库检验记录
  outgoingRecords.value.forEach(record => {
    allRecords.push({
      ...record,
      type: 'outgoing',
      displayType: '出库检验',
      name: record.productName
    })
  })

  // 按时间排序
  allRecords.sort((a, b) => b.timestamp - a.timestamp)

  // 应用筛选
  return allRecords.filter(record => {
    const matchesSearch = record.id.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
        record.name.toLowerCase().includes(searchTerm.value.toLowerCase())
    const matchesType = typeFilter.value === '' || record.type === typeFilter.value
    const matchesResult = resultFilter.value === '' || record.inspectResult === resultFilter.value

    return matchesSearch && matchesType && matchesResult
  })
})

const paginatedIncomingRecords = computed(() => {
  const startIndex = (incomingCurrentPage.value - 1) * recordsPerPage
  const endIndex = startIndex + recordsPerPage
  return incomingRecords.value.slice(startIndex, endIndex)
})

const paginatedOutgoingRecords = computed(() => {
  const startIndex = (outgoingCurrentPage.value - 1) * recordsPerPage
  const endIndex = startIndex + recordsPerPage
  return outgoingRecords.value.slice(startIndex, endIndex)
})

const paginatedAllRecords = computed(() => {
  const startIndex = (allCurrentPage.value - 1) * recordsPerPage
  const endIndex = startIndex + recordsPerPage
  return filteredAllRecords.value.slice(startIndex, endIndex)
})

const incomingTotalPages = computed(() => Math.ceil(incomingRecords.value.length / recordsPerPage))
const outgoingTotalPages = computed(() => Math.ceil(outgoingRecords.value.length / recordsPerPage))
const allTotalPages = computed(() => Math.ceil(filteredAllRecords.value.length / recordsPerPage))

const incomingPagination = computed(() => {
  const startIndex = (incomingCurrentPage.value - 1) * recordsPerPage + 1
  const endIndex = Math.min(incomingCurrentPage.value * recordsPerPage, incomingRecords.value.length)
  return { start: startIndex, end: endIndex }
})

const outgoingPagination = computed(() => {
  const startIndex = (outgoingCurrentPage.value - 1) * recordsPerPage + 1
  const endIndex = Math.min(outgoingCurrentPage.value * recordsPerPage, outgoingRecords.value.length)
  return { start: startIndex, end: endIndex }
})

const allPagination = computed(() => {
  const startIndex = (allCurrentPage.value - 1) * recordsPerPage + 1
  const endIndex = Math.min(allCurrentPage.value * recordsPerPage, filteredAllRecords.value.length)
  return { start: startIndex, end: endIndex }
})

// 方法
const toggleSidebar = () => {
  sidebarExpanded.value = !sidebarExpanded.value
}

const switchPage = (page) => {
  activePage.value = page
  const titleMap = {
    'incoming': '来料检验',
    'outgoing': '出库检验',
    'records': '检验记录查询'
  }
  pageTitle.value = titleMap[page] || '质检管理系统'
}

const resetIncomingForm = () => {
  incomingForm.materialName = ''
  incomingForm.supplier = ''
  incomingForm.batchNo = ''
  incomingForm.quantity = 0
  incomingForm.inspectDate = new Date().toISOString().split('T')[0]
  incomingForm.inspector = ''
  incomingForm.checkAppearance = true
  incomingForm.checkSize = true
  incomingForm.checkPerformance = true
  incomingForm.inspectResult = ''
  incomingForm.remark = ''
}

const resetOutgoingForm = () => {
  outgoingForm.productName = ''
  outgoingForm.productModel = ''
  outgoingForm.productBatch = ''
  outgoingForm.productQuantity = 0
  outgoingForm.outgoingDate = new Date().toISOString().split('T')[0]
  outgoingForm.outgoingInspector = ''
  outgoingForm.outCheckAppearance = true
  outgoingForm.outCheckFunction = true
  outgoingForm.outCheckPackage = true
  outgoingForm.outgoingResult = ''
  outgoingForm.outgoingRemark = ''
}

const handleIncomingSubmit = (event) => {
  // 获取检验项目
  const inspectItems = []
  if (incomingForm.checkAppearance) inspectItems.push('外观检查')
  if (incomingForm.checkSize) inspectItems.push('尺寸测量')
  if (incomingForm.checkPerformance) inspectItems.push('性能测试')

  // 生成检验单号
  const now = new Date()
  const recordId = `IN-QC-${now.getFullYear()}${(now.getMonth() + 1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}-${incomingRecords.value.length + 1}`

  // 创建新记录
  const newRecord = {
    id: recordId,
    materialName: incomingForm.materialName,
    supplier: incomingForm.supplier,
    batchNo: incomingForm.batchNo,
    quantity: incomingForm.quantity,
    inspectDate: incomingForm.inspectDate,
    inspector: incomingForm.inspector,
    inspectItems,
    inspectResult: incomingForm.inspectResult,
    remark: incomingForm.remark,
    timestamp: now.getTime()
  }

  // 添加到记录列表
  incomingRecords.value.unshift(newRecord)

  // 如果检验结果为合格，更新库存
  if (incomingForm.inspectResult === 'pass') {
    updateInventory(incomingForm.materialName, incomingForm.quantity, incomingForm.supplier)
  }

  // 重置表单
  resetIncomingForm()

  // 重新加载记录
  incomingCurrentPage.value = 1

  // 显示成功消息
  showToastMessage(`来料检验记录 ${recordId} 提交成功！`)
}

const handleOutgoingSubmit = (event) => {
  // 获取检验项目
  const inspectItems = []
  if (outgoingForm.outCheckAppearance) inspectItems.push('外观检查')
  if (outgoingForm.outCheckFunction) inspectItems.push('功能测试')
  if (outgoingForm.outCheckPackage) inspectItems.push('包装检查')

  // 生成检验单号
  const now = new Date()
  const recordId = `OUT-QC-${now.getFullYear()}${(now.getMonth() + 1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}-${outgoingRecords.value.length + 1}`

  // 创建新记录
  const newRecord = {
    id: recordId,
    productName: outgoingForm.productName,
    productModel: outgoingForm.productModel,
    productBatch: outgoingForm.productBatch,
    quantity: outgoingForm.productQuantity,
    outgoingDate: outgoingForm.outgoingDate,
    inspector: outgoingForm.outgoingInspector,
    inspectItems,
    inspectResult: outgoingForm.outgoingResult,
    remark: outgoingForm.outgoingRemark,
    timestamp: now.getTime()
  }

  // 添加到记录列表
  outgoingRecords.value.unshift(newRecord)

  // 如果检验结果为合格，更新产品库存
  if (outgoingForm.outgoingResult === 'pass') {
    updateProductInventory(outgoingForm.productName, outgoingForm.productQuantity)
  }

  // 重置表单
  resetOutgoingForm()

  // 重新加载记录
  outgoingCurrentPage.value = 1

  // 显示成功消息
  showToastMessage(`出库检验记录 ${recordId} 提交成功！`)
}

const updateInventory = (materialName, quantity, supplier) => {
  // 查找现有库存
  const existingItem = inventory.value.find(item => item.name === materialName && item.supplier === supplier)

  if (existingItem) {
    // 更新现有库存
    existingItem.quantity += quantity
  } else {
    // 添加新库存
    inventory.value.push({
      id: inventory.value.length + 1,
      name: materialName,
      quantity: quantity,
      supplier: supplier
    })
  }
}

const updateProductInventory = (productName, quantity) => {
  // 查找现有产品
  const existingProduct = products.value.find(product => product.name === productName)

  if (existingProduct) {
    // 更新现有产品库存
    existingProduct.quantity -= quantity
    if (existingProduct.quantity < 0) existingProduct.quantity = 0
  }
}

const showRecordDetails = (recordId, recordType) => {
  let record
  if (recordType === 'incoming') {
    record = incomingRecords.value.find(r => r.id === recordId)
  } else {
    record = outgoingRecords.value.find(r => r.id === recordId)
  }

  if (!record) {
    modalBody.value = '<p class="text-red-500">未找到该记录</p>'
    showModal.value = true
    return
  }

  modalTitle.value = `检验记录详情 - ${recordId}`

  let details = ''
  if (recordType === 'incoming') {
    details = `
      <div class="space-y-3">
        <p><strong>检验类型:</strong> 来料检验</p>
        <p><strong>原材料名称:</strong> ${record.materialName}</p>
        <p><strong>供应商:</strong> ${record.supplier}</p>
        <p><strong>批次号:</strong> ${record.batchNo}</p>
        <p><strong>来料数量:</strong> ${record.quantity} 件</p>
        <p><strong>检验日期:</strong> ${record.inspectDate}</p>
        <p><strong>检验员:</strong> ${record.inspector}</p>
        <p><strong>检验项目:</strong> ${record.inspectItems.join('、')}</p>
        <p><strong>检验结果:</strong> ${getResultBadge(record.inspectResult)}</p>
        <p><strong>备注:</strong> ${record.remark || '无'}</p>
      </div>
    `
  } else {
    details = `
      <div class="space-y-3">
        <p><strong>检验类型:</strong> 出库检验</p>
        <p><strong>产品名称:</strong> ${record.productName}</p>
        <p><strong>产品型号:</strong> ${record.productModel}</p>
        <p><strong>生产批次:</strong> ${record.productBatch}</p>
        <p><strong>出库数量:</strong> ${record.quantity} 台</p>
        <p><strong>出库日期:</strong> ${record.outgoingDate}</p>
        <p><strong>检验员:</strong> ${record.inspector}</p>
        <p><strong>检验项目:</strong> ${record.inspectItems.join('、')}</p>
        <p><strong>检验结果:</strong> ${getResultBadge(record.inspectResult)}</p>
        <p><strong>备注:</strong> ${record.remark || '无'}</p>
      </div>
    `
  }

  modalBody.value = details
  showModal.value = true
}

const closeModal = () => {
  showModal.value = false
}

const printRecord = (recordId) => {
  showToastMessage(`正在打印检验记录: ${recordId}`)
}

const exportToExcel = () => {
  showToastMessage('正在导出Excel文件')
}

const showToastMessage = (message) => {
  toastMessage.value = message
  showToast.value = true

  setTimeout(() => {
    showToast.value = false
  }, 3000)
}

const getResultText = (result) => {
  const resultMap = {
    'pass': '合格',
    'fail': '不合格',
    'pending': '待确认'
  }
  return resultMap[result] || result
}

const getResultBadge = (result) => {
  if (result === 'pass') {
    return '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">合格</span>'
  } else if (result === 'fail') {
    return '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">不合格</span>'
  } else {
    return '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">待确认</span>'
  }
}

const formatDateTime = (timestamp) => {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

const filterRecords = () => {
  // 筛选逻辑在 computed 属性中处理
  allCurrentPage.value = 1
}

const changeIncomingPage = (page) => {
  incomingCurrentPage.value = page
}

const changeOutgoingPage = (page) => {
  outgoingCurrentPage.value = page
}

const changeAllPage = (page) => {
  allCurrentPage.value = page
}

// 生命周期钩子
onMounted(() => {
  // 初始化日期
  const today = new Date().toISOString().split('T')[0]
  incomingForm.inspectDate = today
  outgoingForm.outgoingDate = today
})
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 主界面样式 */
.app-container {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  transition: all 0.3s ease;
}

.sidebar-collapsed {
  width: 70px;
}

.sidebar-expanded {
  width: 250px;
}

.main-content {
  transition: all 0.3s ease;
  min-height: 100vh;
}

.content-expanded {
  margin-left: 250px;
}

.content-collapsed {
  margin-left: 70px;
}

.page-section {
  display: none;
}

.page-section.active-page {
  display: block;
}

.nav-link.active-nav {
  background-color: rgba(255, 255, 255, 0.1);
  font-weight: 500;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  z-index: 1000;
  display: none;
}

.sidebar {
  width: 250px;
  background-color: #1a1a1a;
  color: white;
  padding: 1.5rem 0;
}

.sidebar-header {
  padding: 0 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-menu {
  list-style: none;
  padding: 1rem 0;
}

.sidebar-menu li {
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
}

.sidebar-menu li:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-menu li.active {
  background-color: #2c80ff;
}

.sidebar-menu svg {
  margin-right: 0.75rem;
  width: 20px;
  text-align: center;
}

.main-content { 
  padding: 2rem;
  overflow-y: auto;
}
</style>